<template>
  <!-- <el-dialog title="企业租户注册"
             width="430px"
             class="dialog-box"
             :visible.sync="dialogFormVisible"> -->
  <div class="enterprise-wrap">
    <!-- <el-form :model="enterpriseForm"
             :rules="rules"
             ref="enterpriseForm"
             class="demo-ruleForm"> -->
    <el-form-item label
                  prop="businessLicenseUrl">
      <el-button class="license-btn"
                 @click="enrollVisible = true">上传营业执照</el-button>
      <enroll-dialog v-model="enrollVisible"
                     :ok-button="false"
                     title="上传营业执照"
                     @close="enrollVisible = false">
        <div class="upload-box">
          <img src="@static/images/yyzz.jpg"
               alt="" />
          <nr-upload is-picture
                     type="png"
                     @uploadSuccess="uploadSuccess" />
        </div>
      </enroll-dialog>
    </el-form-item>
    <el-form-item prop="tenantName"
                  label="">
      <el-input v-model="ruleForm.tenantName"
                placeholder="企业名称" />
    </el-form-item>
    <el-form-item prop="socialCreditCode">
      <el-input v-model="ruleForm.socialCreditCode"
                placeholder="统一社会信用代码\组织机构代码" />
    </el-form-item>
    <el-form-item prop="corporation">
      <el-input v-model="ruleForm.corporation"
                placeholder="企业法人" />
    </el-form-item>
    <el-form-item prop="address">
      <!-- <area-cascader :value="ruleForm.address"
                     :props="props"
                     :placeholder="`请选择企业所在城市`"
                     @input="handleInput" /> -->
      <area-select v-model="ruleForm.address"
                   :placeholder="`请选择企业所在城市`"
                   @confirm="handleInput" />
    </el-form-item>
    <el-form-item prop="contactEmail">
      <el-input v-model="ruleForm.contactEmail"
                placeholder="企业邮箱，用于接收重要通知（含注册用户名信息）" />
    </el-form-item>
    <el-form-item prop="alias">
      <el-input v-model="ruleForm.alias"
                placeholder="公司别称，用于区分公司，注册成功后分配账号使用" />
    </el-form-item>
    <el-form-item prop="contactName">
      <el-input v-model="ruleForm.contactName"
                placeholder="企业联系人" />
    </el-form-item>
    <!-- <el-form-item>
      <el-button type="primary"
                 @click="submit">提 交</el-button>
    </el-form-item> -->
    <!-- </el-form> -->
  </div>
</template>

<script>
import AreaSelect from "@basic/area/AreaCodeSelect.vue";
import nrUpload from "@components/advance/upload/Upload.vue";
import enrollDialog from "@components/dialog/Dialog";


export default {
  name: "EnterpriseForm",
  components: { enrollDialog, nrUpload, AreaSelect },
  props: {
    ruleForm: {
      type: Object,
      default: () => { }
    }
    // rules: {
    //   type: Object,
    //   default: () => { }
    // }
  },
  data () {
    return {
      props: {
        label: 'name',
        value: 'areaCode',
      },
      // rules: {
      //   tenantName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }, { min: 1, max: 50, message: '不能超50过个字符', trigger: 'blur' }],
      //   source: [{ required: true, message: '请输入注册来源', trigger: 'blur' }],
      //   socialCreditCode: [{ required: true, message: '请输入营业执照编码', trigger: 'blur' }, { min: 1, max: 18, message: '不能超18过个字符', trigger: 'blur' }, { pattern: /[\d]/g, message: '只能输入字母和数字' }],
      //   corporation: [{ required: true, message: '请输入公司法人', trigger: 'blur' }, { min: 1, max: 10, message: '不能超10过个字符', trigger: 'blur' }],
      //   contactEmail: [{ required: true, message: '请输入联系邮箱', trigger: 'blur' }, { min: 1, max: 50, message: '不能超50过个字符', trigger: 'blur' }, { pattern: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/, message: '请输入正确的邮箱格式' }],
      //   contactMobile: [{ required: true, message: '请输入联系电话', trigger: 'blur' }, { pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/, message: '请输入正确的手机号码格式' }],
      //   address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
      //   alias: [{ required: true, message: '请输入公司别称', trigger: 'blur' }, { pattern: /^[A-Za-z]+$/g, message: '请输入正确的别名' }, { min: 5, max: 20, message: '请输入正确的别名', trigger: 'blur' }],
      //   contactName: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }, { min: 1, max: 10, message: '不能超10过个字符', trigger: 'blur' }]
      // },
      // uploadLicense: `/user/photoRecognized/businessLicense`,
      // enterpriseForm: {
      // },
      enrollVisible: false,
      address: {}
    };
  },
  // computed: {
  //   params () {
  //     const param = this.$route.params.form || {}
  //     this.enterpriseForm.contactMobile = param.phoneNum
  //     return param
  //   }
  // },
  methods: {
    // submit () {
    //   this.$refs.enterpriseForm.validate((valid) => {
    //     if (valid) {
    //       this.postEnterForm(this.enterpriseForm)
    //     } else {
    //       console.log('error submit!!');
    //       return false;
    //     }
    //   });
    // },
    // postEnterForm (param) {
    //   tenantEnroll(param).then(res => {
    //     let { message, code } = res
    //     this.$message.success(message)
    //     if (code === 0) {
    //       this.$router.push({ path: '/login' })
    //     } else {
    //       this.$message.error(message)
    //     }
    //   })
    // },
    handleInput (data) {
      this.address = data
      this.$emit("areaSelect", data);
    },
    uploadSuccess (data) {
      data.source = 0;
      data.businessLicenseUrl = data.fileUrl;
      this.$nextTick(() => {
        this.enrollVisible = false;
        this.$emit("input", data);
      });
    }
  }
};
</script>

<style scoped>
.enterprise-wrap {
  /* width: 360px; */
  /* padding: 35px 35px 15px 35px;
  box-shadow: 5px 5px 5px rgb(0 0 0 / 20%);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  left: 50%;
  right: 50%;
  transform: translate(-50%, 25%); */
}
.license-btn {
  width: 100%;
}
.demo-ruleForm >>> .el-button {
  width: 100%;
}
.dialog-box /deep/ .el-dialog__body {
  padding: 20px 20px 0 20px;
}
.dialog-footer >>> .el-button {
  width: 100%;
}
.demo-ruleForm
  >>> .el-form-item.is-required:not(.is-no-asterisk)
  > .el-form-item__label:before,
.el-form-item.is-required:not(.is-no-asterisk)
  .el-form-item__label-wrap
  > .el-form-item__label:before {
  position: absolute;
  right: 0;
  line-height: 100px;
}
.upload-box {
  display: flex;
  justify-content: space-between;
}
.upload-box img {
  width: 200px;
}
</style>
